<template>
  <div id="email" class="container">
    <!-- <h3 class="title"><span />系统配置</h3> -->
    <el-tabs id="tabcard" v-model="activeName" class="content" type="card" @tab-click="handleClick">
      <el-tab-pane :label="menu[4]" name="first">
        <el-form :model="companyForm" inline label-width="120px">
          <el-form-item label="公司名称" prop="company_name">
            <el-input v-model="companyForm.company_name" />
          </el-form-item>
          <el-form-item label="公司电话" prop="company_phone">
            <el-input v-model="companyForm.company_phone" />
          </el-form-item>
          <el-form-item label="公司邮箱" prop="company_email">
            <el-input v-model="companyForm.company_email" />
          </el-form-item>
          <el-form-item label="公司地址" prop="company_address">
            <el-input v-model="companyForm.company_address" />
          </el-form-item>
          <el-form-item label=" ">
            <el-button type="primary" class="save" @click="saveCompany">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane :label="menu[0]" name="second">
        <Email v-if="activeName == 'second'" :data="emailData" />
      </el-tab-pane>
      <el-tab-pane :label="menu[1]" name="third">
        <Files v-if="activeName == 'third'" :data="filesData" />
      </el-tab-pane>
      <el-tab-pane :label="menu[2]" name="fourth">
        <Statistics v-if="activeName == 'fourth'" :data="statisticsData" />
      </el-tab-pane>
      <el-tab-pane :label="menu[3]" name="fifth">
        <Others v-if="activeName == 'fifth'" :data="othersData" />
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
import systemApi from '@/api/system/system.js'
import Files from './components/files.vue'
import Others from './components/others.vue'
import Statistics from './components/statistics.vue'
import Email from './components/email.vue'
export default {
  components: {
    Files,
    Others,
    Statistics,
    Email
  },
  data() {
    return {
      companyForm: {
        group: '',
        company_name: '',
        company_address: '',
        company_phone: '',
        company_email: ''
      },
      menu: '',
      activeName: 'first',
      enailData: [], // 邮箱配置
      filesData: [], // 文件上传设置
      othersData: [], // 第三方设置
      statisticsData: [], // 统计分析账号
      companyData: [] // 公司配置
    }
  },
  created() {
    this.getList()
  },
  mounted() {
  },
  methods: {
    // 配置项列表
    getList() {
      systemApi.sysList().then(res => {
        // this.menu = res.data
        const tabMenu = []
        res.data.forEach(el => {
          tabMenu.push(el.form_title)
        })

        this.menu = tabMenu
        this.emailData = res.data[0]
        this.filesData = res.data[1]
        this.statisticsData = res.data[2]
        this.othersData = res.data[3]
        this.companyData = res.data[4]
        this.companyForm.group = res.data[4].group
        const arr = this.companyData.children
        arr.forEach(el => {
          this.companyForm[el.title] = el.value
        })
      })
    },

    saveCompany() {
      systemApi.sysUpdate({ ...this.companyForm }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    handleClick(tab, event) {

    }
  }
}
</script>
<style lang='scss'>
#email{
  .container{
    background-color: none;
  }

  .el-form-item{
  width: 100%;
}

.el-form--inline .el-form-item__content{
    width: calc(100% - 150px);
    .el-select{
      width: 100%;
    }
  }
}

</style>
<style scoped lang='scss'>

.content{

    padding: 35px;
    border-radius: 5px;
}
.avatar{
  height: 60px;
}
</style>
